import { App, Component } from "vue";

import {
  ElCascader,
  ElAffix,
  ElSkeleton,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElScrollbar,
  // ElSubmenu,
  ElSubMenu,
  ElButton,
  ElCol,
  ElRow,
  ElSpace,
  ElDivider,
  ElCard,
  ElDropdown,
  ElDialog,
  ElMenu,
  ElMenuItem,
  ElDropdownItem,
  ElDropdownMenu,
  ElIcon,
  ElInput,
  ElForm,
  ElFormItem,
  ElLoading,
  ElPopover,
  ElPopper,
  ElTooltip,
  ElDrawer,
  ElPagination,
  ElAlert,
  ElRadioButton,
  ElRadioGroup,
  ElTree,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElPopconfirm,
  ElRadio,
  ElCollapseTransition,
  ElTag,
  ElCheckbox,
  ElUpload,
  ElTabs,
  ElTabPane,
  ElDescriptions,
  ElDescriptionsItem,
  ElStep,
  ElSteps,
  ElAvatar,
  ElInputNumber,
  ElEmpty,
  ElTimeline,
  ElTimelineItem,
  ElNotification,
  ElInfiniteScroll,
  ElResult,
  ElLink,
  ElPageHeader,
  ElTransfer,
  ElSelectV2,
  ElBacktop,
  ElCheckboxGroup,
  ElSlider,
  ElButtonGroup,
  ElTreeV2,
  ElCarousel,
  ElCarouselItem,
  ElAutocomplete,
  ElCollapse,
  ElCollapseItem,
  ElBadge,
  ElProgress
} from "element-plus";

// import "element-plus/packages/theme-chalk/src/base.scss";

const components = [
  ElAffix,
  ElSkeleton,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElScrollbar,
  // ElSubmenu,
  ElSubMenu,
  ElButton,
  ElCol,
  ElRow,
  ElSpace,
  ElDivider,
  ElCard,
  ElDropdown,
  ElDialog,
  ElMenu,
  ElMenuItem,
  ElDropdownItem,
  ElDropdownMenu,
  ElIcon,
  ElInput,
  ElForm,
  ElFormItem,
  ElPopover,
  ElPopper,
  ElTooltip,
  ElDrawer,
  ElPagination,
  ElAlert,
  ElRadioButton,
  ElRadioGroup,
  ElTree,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElPopconfirm,
  ElRadio,
  ElCollapseTransition,
  ElTag,
  ElCheckbox,
  ElUpload,
  ElTabs,
  ElTabPane,
  ElDescriptions,
  ElDescriptionsItem,
  ElSteps,
  ElStep,
  ElAvatar,
  ElInputNumber,
  ElEmpty,
  ElTimeline,
  ElTimelineItem,
  ElNotification,
  ElInfiniteScroll,
  ElResult,
  ElLink,
  ElPageHeader,
  ElTransfer,
  ElSelectV2,
  ElBacktop,
  ElCheckboxGroup,
  ElSlider,
  ElButtonGroup,
  ElTreeV2,
  ElCarousel,
  ElCarouselItem,
  ElAutocomplete,
  ElCollapse,
  ElCollapseItem,
  ElBadge,
  ElCascader,
  ElProgress
];

const plugins = [ElLoading];

export function useElementPlus(app: App) {
  components.forEach((component: Component) => {
    app.component(component.name, component);
  });
  plugins.forEach(plugin => {
    app.use(plugin);
  });
}
